<template>
  <a-spin :spinning="confirmLoading">
    <ants-form-container :disabled="false" style="padding: 20px 10px">
      <a-form slot="detail" :form="form">
        <a-row>
          <a-col :span="24">
            <a-form-item label="头像" :label-col="labelCol2" :wrapper-col="wrapperCol2">
              <ants-image-upload v-decorator="['avatar', validatorRules.avatar]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用户昵称" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-decorator="['realname', validatorRules.realname]" placeholder="请输入用户昵称"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用户账号" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input
                v-decorator.trim="['username']"
                placeholder="请输入用户账号"
                :disabled="true"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="出生日期" :label-col="labelCol" :wrapper-col="wrapperCol">
              <ants-date v-decorator="['birthday']" placeholder="请选择出生日期" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="性别" :label-col="labelCol" :wrapper-col="wrapperCol">
              <ants-dict-select-tag
                v-decorator="['sex']"
                type="radioButton"
                :trigger-change="true"
                dict-code="sex"
                placeholder="请选择性别"
                style="width: 100%;"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="工作时间" :label-col="labelCol" :wrapper-col="wrapperCol">
              <ants-date v-decorator="['workingHours']" placeholder="请选择工作时间" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="个人描述" :label-col="labelCol2" :wrapper-col="wrapperCol2">
              <a-textarea
                v-decorator="['personDescribe']"
                placeholder="请输入个人描述，可以是一段话，也可以是一个座右铭！"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24" style="text-align: center">
            <a-button type="primary" shape="round" @click="submitForm">
              保存
            </a-button>
            <a-button type="danger" shape="round" style="margin-left: 20px" @click="cancelEdit">
              取消
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </ants-form-container>
  </a-spin>
</template>

<script>
import AntsFormContainer from '@/components/ants/AntsFormContainer'
import pick from 'lodash.pick'
import AntsImageUpload from '@/components/ants/AntsImageUpload'
import AntsDate from '@/components/ants/AntsDate'
import store from '@/store'
import AntsDictSelectTag from '@/components/dict/AntsDictSelectTag'

export default {
  name: 'PersonalDataBaseEdit',
  components: {
    AntsDictSelectTag,
    AntsFormContainer,
    AntsImageUpload,
    AntsDate
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 22 }
      },
      validatorRules: {
        avatar: {
          rules: [{
            required: true, message: '请上传头像!'
          }]
        },
        realname: { rules: [{ required: true, message: '请输入用户名称!' }] }
      },
      url: {
        edit: '/sys/user/editUserInfo'
      },
      confirmLoading: false,
    }
  },
  methods: {
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'realname', 'username', 'birthday', 'sex', 'avatar', 'workingHours', 'personDescribe'))
      })
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          const formData = Object.assign(this.model, values)

          store.dispatch('user/addOrUpdateUser', {
            url: that.url.edit,
            method: 'put',
            params: formData
          }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              this.$emit('cancel')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    cancelEdit() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>

</style>
